<?
header("Access-Control-Allow-Origin: *");
include 'config.inc.php';
//获取平台的get
   $username = @$_GET['username'];
   $password = @$_GET['password'];
   $cion     = @$_GET['cion'];
   var_dump($username);exit;
include 'member.php';
?>
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
 <meta name="viewport" content="width=480" />
 <head>
  <script>
 /(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName("head"),viewport=document.createElement("meta"),viewport.name="viewport",viewport.content="target-densitydpi=device-dpi, width=480px, user-scalable=no",head.length>0&&head[head.length-1].appendChild(viewport));
 </script>
 <script src="js/jquery.1.7.2.min.js"></script>
 <link href="layui/css/layui.css" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" href="./webuploader/webuploader.css">
 <script src="./webuploader/webuploader.min.js"></script>
 <script src="layer/layer.js"></script>
 <script src="layui/layui.js"> </script>
 <link rel="stylesheet" href="./css/index.css">
    <style>
      .spinner { width: 60px; height: 60px; display: inline-block; } .spinner
      .three-bounce { position: relative; text-align: center; top: 50%; bottom:
      50%; margin-top: -9px } .spinner .three-bounce>div { display: inline-block;
      width: 18px; height: 18px; border-radius: 100%; top: 50%; margin-top: -9px;
      background: #aeadba; -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode:
      both; animation-fill-mode: both } .spinner .three-bounce .one { -webkit-animation-delay:
      -.32s; animation-delay: -.32s; background: rgb(55,137,250); } .spinner
      .three-bounce .two { -webkit-animation-delay: -.16s; animation-delay: -.16s;
      background: rgb(99,99,99); } .spinner .three-bounce .three { background:
      rgb(235,67,70); } @keyframes bouncedelay { 0%,100%,80% { transform: scale(0);
      -webkit-transform: scale(0) } 40% { transform: scale(1); -webkit-transform:
      scale(1) } } body, html { height: 100%; } .chat { background-size: 100%
      auto !important; }
    </style>
    <link type="text/css" rel="stylesheet" href="./css/chat-index.css">
    <link type="text/css" rel="stylesheet" href="./css/index(1).css">
    <link type="text/css" rel="stylesheet" href="./css/index-index-inde-2596aa08.css">
    <style type="text/css">
      *[data-v-5928e1c7] { -webkit-box-sizing: border-box; box-sizing: border-box;
      } .fullscreen-v-img[data-v-5928e1c7] { z-index: 9999; height: 100%; width:
      100%; position: fixed; top: 0; left: 0; overflow: hidden; background-color:
      rgba(0, 0, 0, .7); -ms-touch-action: none; touch-action: none; } .content-v-img
      img[data-v-5928e1c7] { width: auto; height: auto; max-width: 100%; max-height:
      100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin:
      auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select:
      none; user-select: none; } .header-v-img[data-v-5928e1c7] { position: absolute;
      width: 100%; background-color: rgba(0, 0, 0, .3); height: 50px; z-index:
      9999; display: flex; justify-content: space-between; align-items: center;
      } .title-v-img[data-v-5928e1c7] { font-family: 'Avenir', Helvetica, Arial,
      sans-serif; font-size: 18px; font-weight: 400; color: white; text-align:
      center; max-height: 100%; overflow: auto; } .count-v-img[data-v-5928e1c7],
      .close-v-img[data-v-5928e1c7] { width: 80px; font-family: 'Avenir', Helvetica,
      Arial, sans-serif; line-height: 50px; } .count-v-img[data-v-5928e1c7] {
      font-size: 15px; color: white; margin-left: 10px; } .close-v-img[data-v-5928e1c7]
      { margin-right: 10px; color: #E5E6EB; font-size: 30px; cursor: pointer;
      -webkit-transition: color .4s ease-in-out; transition: color .4s ease-in-out;
      text-align: right; } .close-v-img[data-v-5928e1c7]:hover { color: white;
      } .prev-v-img svg[data-v-5928e1c7], .next-v-img svg[data-v-5928e1c7] {
      margin: 5px auto; } .prev-v-img[data-v-5928e1c7], .next-v-img[data-v-5928e1c7]
      { color: white; width: 35px; height: 35px; position: absolute; top: 50%;
      margin-top: -12.5px; font-size: 15px; font-family: 'Avenir', Helvetica,
      Arial, sans-serif; text-align: center; background-color: rgba(0, 0, 0,
      .3); z-index: 1000; opacity: .3; -webkit-transition: opacity .3s ease-in-out;
      transition: opacity .3s ease-in-out; cursor: pointer; } .prev-v-img[data-v-5928e1c7]:hover,
      .next-v-img[data-v-5928e1c7]:hover { opacity: 1; } .prev-v-img[data-v-5928e1c7]
      { left: 10px; } .next-v-img[data-v-5928e1c7] { right: 10px; } .v-img-fade-enter[data-v-5928e1c7],
      .v-img-fade-leave-to[data-v-5928e1c7] { opacity: 0; } .v-img-fade-enter-active[data-v-5928e1c7],
      .v-img-fade-leave-active[data-v-5928e1c7] { -webkit-transition: opacity
      .3s ease-in-out; transition: opacity .3s ease-in-out; } .body-fs-v-img
      {}
      #scroll:hover {
        color: #757575 !important;
      }
    </style>
	<!-- @canshu-->
  </head>
<body onLoad="Autofresh()">
    <div id="appLoading" class="bet-loading" style="position: fixed; width: 100%; top: 200px; text-align: center; display: none;">
      <div class="spinner">
        <div class="three-bounce">
          <div class="one">
          </div>
          <div class="two">
          </div>
          <div class="three">
          </div>
        </div>
      </div>
    </div>
    <div class="skin_<?php echo $_GET['color']?>" style="height: 100%;">
      <div class="lay-relative chat">
        <!---->
        <div class="chat-header">
          <div class="ttl">
            <span id="online">
              <i class="iconfont icon-fangjian" style="vertical-align: 0px;">
              </i>
              聊天室
              </span>
          </div>
        </div>
<div class="list" style="bottom: 98px;">
  <div class="lay-scroll" style="padding-top: 15px;">
<div id="center">


</div>
<?
  if($username ==''){
    echo '<div class="Item SysMsg"><div class="inner"><p>请先登录账号</p></div></div>';
  }
?>
</div>

          <!---->
          <div class="el-dialog__wrapper" style="display: none;">
            <div class="el-dialog el-dialog--small chat-user-info" style="top: 15%;">
              <div class="el-dialog__header">
                <span class="el-dialog__title">
                  查看用户信息
                </span>
                <button type="button" aria-label="Close" class="el-dialog__headerbtn">
                  <i class="el-dialog__close el-icon el-icon-close">
                  </i>
                </button>
              </div>
              <!---->
              <!---->
            </div>
          </div>
        </div>

        <div class="compose">
	 <? if($admin == '1'){ ?>
          <div class="control-bar">
			<span>管理员操作区：</span>
			 <a href="javascript:void(0)" id="send_ball_btn" title="发送红包" class="btn-control">
               <i >
                 发送红包
			  </i>
            </a>
			</div>
		<? }?>
          <div class="control-bar">
            <span>
            </span>
            <a href="javascript:void(0)" id="face_btn" title="发送表情" class="btn" style="display:inline-block;">
              <i class="iconfont icon-liaotianbiaoqing">
              </i>
            </a>
               <a href="javascript:void(0)" id="images_btn" title="上传图片" class="btn" style="display:none;">
               <i class="iconfont icon-erjiyemian-liaotianduihua-danchuangtianjiatupian">
              </i>
            </a>
			   <a href="javascript:void(0)" id="chat_log_btn" title="记录" class="btn-control" style="display:none;">
               <i >
                 记录
			  </i>
            </a>
			<a href="javascript:void(0)" id="info_btn" title="个人info" class="btn-control" style="display:none;">
               <i >
                 个人信息
			  </i>
            </a>
			<a href="javascript:void(0)" id="info_btn_demo" title="个人info" class="btn-control">
               <i >
                 欢迎使用聊天室
			  </i>
            </a>
            <!---->
          </div>
          <div class="typing">
            <div class="txtinput el-textarea
            is-disabled">
              <div contenteditable="true" id="send_value" placeholder="请输入信息"
              type="textarea" autosize="[object Object]" rows="2" autocomplete="off"
              validateevent="true" class="el-textarea__inner" style="height:
              54px;"></div>
            </div>
            <div class="sendbtn">
              <button id="send_button" href="javascript:void(0)" class="u-btn1">
                发送
              </button>
            </div>
          </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<div id="scroll" style="position:absolute;left: 100px;font-size: 14px;;top:75px;cursor:pointer;background: #ffffff;border: 1px solid #e2e2e2;padding: 1px 9px;border-radius: 15px;display: inline-block;color: #a5a5a5;">&#167;&nbsp;&nbsp;滚屏</div>
<div id="gonggao" style="position: absolute;top: 40px;height: 30px;line-height: 30px;left: 5px;right: 5px;background: rgba(237,244,254,.91);border: 1px solid #c2cfe2;border-radius: 5px;padding: 0 10px;overflow: hidden;"><span style="color: #ff0000;">公告：</span>ab<marquee direction="left">测试公告文字移动效果</marquee></div>
<div id="face_leruge" style="position:absolute;right:0;top:50%;background-color:#ffffff;display:none;">
<?php
for ($x=0; $x<=70; $x++) { ?>
 <button id="face<?echo $x; ?>"><img src="/layui/images/face/<?echo $x; ?>.gif"><button>
<? } ?>
</body>

<?php
for ($x=0; $x<=70; $x++) { ?>
<script>
var username='<?echo $_GET['username'];?>';
var password='<?echo $_GET['password'];?>';
var user_vip='<?echo $_GET['vip'];?>';
var cion='<?echo $_GET['cion'];?>';


 //点击按钮发送
 var oBtn = document.getElementById('face<?echo $x;?>');
//     oBtn.onclick = function(){
//         $.post("send.php", {username: username,password: password,user_vip: user_vip,cion: cion,sendvalue:'<img width="22" height="22" src="/layui/images/face/<?echo $x;?>.gif">' },
//    function(data){
// 	//返回值
//    layer.msg(data);
//    });
// };
oBtn.onclick = function () {
  $('#send_value').append('<img width="22" height="22" src="/layui/images/face/<?echo $x;?>.gif">');
  $('#face_leruge').css('display', 'none')
}
</script>
<? } ?>
</div>

<script>
var username  = '<? echo $username;?>';
var password  = '<? echo $password;?>';
var user_vip  = '<? echo $user_vip;?>';
var cion  = '<? echo $cion;?>';

//查找聊天记录
 var oBtn = document.getElementById('chat_log_btn');
     oBtn.onclick = function(){
     window.open("/log_chat.php?username=<? echo $username;?>&password=<? echo $password;?>");
};

//抢红包
function get_redball_btn(){
	 $.post("/redball/index.php", { username: username,password: password,cion: cion},
   function(data){
	//返回值
    layer.alert(data);
    });
}
//info
 var oBtn = document.getElementById('info_btn');
     oBtn.onclick = function(){
		 if(username!='guest'){
			 layer.open({
  type: 2,
  title: '个人信息',
  shadeClose: true,
  shade: 0.8,
  area: ['350px', '180px'],
  content: '/info.php?username=<? echo $username;?>&password=<? echo $password;?>' //iframe的url
});
		  }else{
			layer.msg('试玩账户无法使用聊天室请注册');
		  }

};
</script>


<script>
$('#scroll').click(function () {
  $('.lay-scroll').scrollTop( $('.lay-scroll')[0].scrollHeight );
})

setTimeout(() => {
  $('.lay-scroll').scrollTop( $('.lay-scroll')[0].scrollHeight );
}, 2000);
 var oBtn = document.getElementById('face_btn');
 oBtn.onclick = function () {
   $('#face_leruge').css('display', 'inline-block')
 }
 function aite(value) {
   $('#send_value').html(value)
 }

 var uploader = WebUploader.create({
   dnd: '#send_value',
   paste: '#send_value',
   server: './leruge_uploader.php',
   auto: true,
   disableGlobalDnd: true,
   fileVal: 'img'
 })

 uploader.on('uploadSuccess', function (file, data) {
   $('#send_value').append('<img src="' + data.img + '" style="max-width: 250px;max-height: 250px;" onclick="parentImg(\'/chat/'+data.img+'\', '+data.height+', '+data.width+')" />')
 })

 function parentImg(img, height, width) {
  var data = {img: img, height: height, width: width}
  window.parent.postMessage(data, 'http://yongli.cn/')
 }

// var titleInit = document.title, isShine = true;

// setInterval(function() {
//     var title = document.title;
//     if (isShine == true) {
//         if (/新/.test(title) == false) {
//             document.title = '【你有新消息】';
//         } else {
//             document.title = '【　　　　　】';
//         }
//     } else {
//         document.title = titleInit;
//     }
// }, 500);

// window.onfocus = function() {
//     isShine = false;
// };
// window.onblur = function() {
//     isShine = true;
// };

// // for IE
// document.onfocusin = function() {
//     isShine = false;
// };
// document.onfocusout = function() {
//     isShine = true;
// };
//     oBtn.onclick = function(){
// layer.open({
//   type: 2,
//   title: '发送表情',
//   shadeClose: true,
//   shade: 0.8,
//   area: ['300px', '250'],
//   content: '/face.php?username=<? echo $username;?>&password=<? echo $password;?>&vip=<? echo $user_vip;?>&cion=<? echo $cion;?>' //iframe的url
// });
// };

 var oBtn = document.getElementById('images_btn');
    oBtn.onclick = function(){
layer.open({
  type: 2,
  title: '发送图片',
  shadeClose: true,
  shade: 0.8,
  area: ['300px', '180'],
  content: '/file.php?username=<? echo $username;?>&password=<? echo $password;?>&vip=<? echo $user_vip;?>&cion=<? echo $cion;?>' //iframe的url
});
};
function sends(){
//获取内容值
var sendvalue = $('#send_value').html()
//判断是否为空
if(sendvalue == ''){
  layer.msg('发送的信息不能为空');
  return false;
}
 $('#send_value').html('')
//OK后发送post
$.post("send.php", { sendvalue: sendvalue,username: username,password: password,user_vip: user_vip,cion: cion},
   function(data){
	//返回值
   layer.msg(data);
   setTimeout(() => {
    $('.lay-scroll').scrollTop( $('.lay-scroll')[0].scrollHeight );
   }, 500);
   });
}

  //回车键发送
  document.onkeydown=function(){
      if (event.keyCode == 13){
		  if(username!='guest'){
			 sends();
		  }else{
			layer.msg('试玩账户无法使用聊天室请注册');
		  }

           }
       }
 //点击按钮发送
 var oBtn = document.getElementById('send_button');
    oBtn.onclick = function(){
        if(username!='guest'){
			 sends();
		  }else{
			layer.msg('试玩账户无法使用聊天室请注册');
		  }
};


</script>
<!-- ajax -->

 <script>
    var xmlobj;
    function createXMLHttpRequest(){
      if(window.ActiveXObject){
        xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
      }
      else if(window.XMLHttpRequest){
        xmlobj=new XMLHttpRequest();
      }
    }
    function Autofresh(){
      createXMLHttpRequest();
	  //get已经获取到的用户名
      xmlobj.open("GET","center.php?username=<? echo $username;?>&password=<? echo $password;?>&cion=<?echo $cion;?>",true);
      xmlobj.onreadystatechange=doAjax;
      xmlobj.send("r="+Math.random());//使用随机数处理缓存
	}
    function doAjax(){
      if(xmlobj.readyState==4 && xmlobj.status==200){
        var time_span=document.getElementById('center');
        time_span.innerHTML=xmlobj.responseText;
        console.log(xmlobj.responseText);return false;
	    setTimeout("Autofresh()",500);
      }
    }
  </script>

<? if($admin == '1'){ ?>

<script>
 var oBtn = document.getElementById('send_ball_btn');
     oBtn.onclick = function(){
layer.open({
  type: 2,
  title: '发送红包',
  shadeClose: true,
  shade: 0.8,
  area: ['300px', '200px'],
  content: '/redball/send_ball.php?username=<? echo $username;?>&password=<? echo $password;?>' //iframe的url
});
};
</script>

<?php } ?>
  </body>

</html>
